<template>
  <el-dialog
          :model-value="dialogVisible"
          :title="dialogStatus == 'create' ? '新建内容提供方' : '编辑内容提供方'"
          :before-close="handleCancelDialog"
          width="45%"
          top="5vh"
  >
    <el-form ref="dialogFormDataRef" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="AppID" prop="appid" v-if="dialogStatus == 'update'">
        <el-input v-model="formData.appid" disabled />
      </el-form-item>
      <el-form-item label="AppSecret" prop="appsecret" v-if="dialogStatus == 'update'">
        <el-input v-model="formData.appsecret" disabled />
      </el-form-item>
      <el-form-item label="提供方名称" prop="name">
        <el-input placeholder="请输入内容提供方名称" v-model.trim="formData.name" />
      </el-form-item>
      <el-form-item label="适用内容包"  class="chkboxgroup-list">
        <el-checkbox-group v-model="formData.packageids">
          <el-checkbox
                  v-for="pk in packageList"
                  :key="pk.packageid"
                  :label="pk.packageid"
                  name="packageids">
            {{pk.name}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="IP白名单" style="margin-bottom:5px">
        <el-tag
                v-for="ip in formData.whiteips"
                :key="ip"
                closable
                class="mr10"
                @close="handleCloseWhiteIps(ip)"
        >{{ip}}</el-tag>
        <el-input
                v-if="inputVisible"
                ref="InputRef"
                v-model="inputValue"
                class="ml-1 w-20 input-w"
                size="mini"
                @keyup.enter="handleInputConfirm"
                @blur="handleInputConfirm"
        />
        <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
          + 添加IP白名单
        </el-button>
      </el-form-item>
      <el-form-item label="是否审核" style="margin-bottom:-10px">
        <el-radio-group v-model="formData.isreview">
          <el-radio :label="1">审核</el-radio>
          <el-radio :label="0">不审核</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否可用" style="margin-bottom:0">
        <el-radio-group v-model="formData.inuse">
          <el-radio :label="1">可用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input placeholder="请输入排序序号" v-model.number="formData.sort" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div align="center">
        <el-button type="default" size="mini" @click="handleCancelDialog">取消</el-button>
        <el-button type="primary" size="mini" @click="dialogStatus == 'create' ? handleConfirmCreate() : handleConfirmUpdate()">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import {toRef, reactive, ref, nextTick} from 'vue'
  import {createCp, updateCp} from "@/api/cp";
  import {ElMessage} from 'element-plus'

  export default {
    name: "CreateContentProvider",
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      dialogStatus: {
        type: String,
        default: 'create'
      },
      dialogFormData: {
        type: Object,
        default() {
          return {
            id: undefined,
            cpid: undefined,
            name: '',
            sort: 1
          }
        }
      },
      packageList: {
        type: Array,
        default() {
          return []
        }
      }
    },
    emits: ['handleCancelDialog', 'reloadData'],
    setup(props, context) {
      const formData = toRef(props, 'dialogFormData')
      const rules = reactive({
        name: [{required: true, message: '请输入内容提供方名称', trigger: 'blur'}],
        sort: [{type: 'number', message: '排序只能输入数字', trigger: 'blur'}]
      })
      const dialogFormDataRef = ref(null)
      const inputVisible = ref(false)
      const InputRef = ref(null)
      const inputValue = ref('')

      /** 删除IP白名单 **/
      const handleCloseWhiteIps = (ip) => {
        formData.value.whiteips.splice(formData.value.whiteips.indexOf(ip), 1)
      }
      /** 确定输入IP **/
      const handleInputConfirm = () => {
        if (inputValue.value) {
          formData.value.whiteips.push(inputValue.value)
        }
        inputVisible.value = false
        inputValue.value = ''
      }
      /** 显示输入框 **/
      const showInput = () => {
        inputVisible.value = true
        nextTick(() => {
          InputRef.value.input.focus()
        })
      }
      /** 创建内容提供方 **/
      const handleConfirmCreate = () => {
        dialogFormDataRef.value.validate(valid => {
          if (valid) {
            createCp(formData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                handleCancelDialog()
                context.emit('reloadData')
              }
            })
          }
        })
      }

      /** 编辑内容提供方 **/
      const handleConfirmUpdate = () => {
        dialogFormDataRef.value.validate(valid => {
          if (valid) {
            updateCp(formData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                handleCancelDialog()
                context.emit('reloadData')
              }
            })
          }
        })
      }

      const handleCancelDialog = () => {
        context.emit('handleCancelDialog')
      }

      return {
        formData,
        rules,
        handleCancelDialog,
        dialogFormDataRef,
        handleCloseWhiteIps,
        inputVisible,
        InputRef,
        inputValue,
        handleInputConfirm,
        showInput,
        handleConfirmCreate,
        handleConfirmUpdate
      }
    }
  }
</script>

<style scoped>

</style>
